<template>
  <div class="home_swiper">
    <!-- Slider main container -->
    <div class="swiper relative h-80">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide bg-theme" v-for="item in 4" :key="item">
          <!-- Slide {{ item }} -->
          <img
            src="http://211.149.161.30:8090/storage/202406/8df3e5f4cb0bee8ecc1ec308b1bba789.jpg"
            class="w-full h-full object-cover"
            loading="lazy"
          />
          <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </div>
      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>

      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <!-- 进度条 -->
      <div class="autoplay-progress">
        <svg viewBox="0 0 48 48">
          <circle cx="24" cy="24" r="20"></circle>
        </svg>
        <span></span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Swiper from "swiper";
import { Navigation, Pagination, Scrollbar, Autoplay } from "swiper/modules";
let swiper: Swiper | null = null;
const getList = async (params: any) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        total: 30,
        list: ["服务端渲染", 2, "测试渲染"],
      });
    }, 5000);
  });
};
await getList({});
// Now you can use Swiper
onMounted(() => {
  if (window) {
    const progressCircle = document.querySelector(
      ".home_swiper .autoplay-progress svg"
    ) as HTMLDivElement;
    const progressContent = document.querySelector(
      ".home_swiper .autoplay-progress span"
    );
    swiper = new Swiper(".swiper", {
      // Install modules
      modules: [Navigation, Pagination, Scrollbar, Autoplay],
      speed: 500,
      loop: true,
      init: false,
      slidesPerView: 2, // 展示几个
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 8000,
        disableOnInteraction: false,
      },
      grabCursor: true,
      pagination: {
        el: ".swiper-pagination",
        type: "bullets",
        // type: "progressbar",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      on: {
        autoplayTimeLeft(s, time, progress) {
          progressCircle?.style.setProperty("--progress", (1 - progress).toString());
          progressContent!.textContent = `${Math.ceil(time / 1000)}s`;
        },
      },
    });
    swiper.on("init", function () {
      // swiper?.slideTo(1);
      // timer = setInterval(() => {
      //   if (swiper) {
      //     swiper.slideNext();
      //   }
      // }, 5000);
      // do something
    });
    swiper.init();
  }
});
onUnmounted(() => {
  if (swiper) {
    swiper.destroy();
    swiper = null;
  }
});
</script>
<style lang="scss">
.home_swiper {
  .autoplay-progress {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--swiper-theme-color);
  }

  .autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--swiper-theme-color);
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
  }
}
</style>
